<div fxLayout="row" fxLayoutAlign="space-around center" class="container">
  <div class="box blocks one">1</div>
  <div class="box blocks two two_h">2</div>
  <div class="box blocks three">3</div>
  <div class="box blocks four four_h">4</div>
  <div class="box blocks five">5</div>
</div>

<hr>

<ng-container *ngFor="let dir of directions; let last = last">
  <a routerLink="." (click)="direction = dir">{{dir}}</a>
  <span *ngIf="!last">|</span>
</ng-container>

<div fxLayout="column" class="zero">
  <div fxFlex="33" class="one"></div>

  <div fxFlex="33%" [fxLayout]="direction" class="two">
    <div fxFlex="22%" class="two_one">one</div>
    <div fxFlex="55px" class="two_two">two</div>
    <div fxFlex="30" class="two_three">three</div>
  </div>

  <div fxFlex class="three"></div>
</div>

<hr>

